<template>
  <div id="con">
    <router-link to="./about">列表</router-link>
    <router-view />
    <label for="" type="button" class="btn">
      <span>选择图片</span>
      <input id="input" type="file" @change="changeFile" multiple />
      </label>
    <button id="upload" class="btn" style="margin-left: 30px; width: 60px;top:190px;" @click="upload">上传</button>
  </div>
</template>
<script>
import axios from 'axios';
  export default {
    data() {
      return {
        file:{},
        content:"",
        type:""
      };
    },
    methods: {
      upload(){
            let formData=new FormData()
            formData.append('file',this.content)
            axios.post('http://localhost:3000/upload',{"fileId":Math.random(),"formData":formData.get('file'),"fileType":this.type,"fileName":this.file.name,"fileSize":this.file.size,"lastModifiedDate":this.file.lastModifiedDate})
            .then(res=>{
              if (res.status == 200){
                console.log("upload",res.data);
              }
              if (res.data.token) {
                  localStorage["token"] = res.data.token;
                  alert("success");
              }
            })
        },
        changeFile(e){
            this.file=e.target.files[0];
            // console.log(this.file);
            let reader=new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onload=()=>{
              this.content=reader.result;
              this.type=e.target.files[0].type;
            }
        }
    }
  }
</script>

<style>
* {
  margin:0 auto;
  z-index: 0;

}
  
  label input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
  .btn {
    left:500px;
    top:200px;
    width: 80px;
    height: 30px;
    background-color: rgb(49, 132, 241);
    border: 0px;
    border-radius: 10px;
    color: white;
    position: relative;
    overflow: hidden;
    text-align: center;
    vertical-align: center;
    border-radius: 5px;
    display: inline-block;

}
  #con{
    height: 500px;
    width:100%;
    border: 3px dashed gray;
  }
</style>